﻿<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta charset="utf-8" />
    <title>运营平台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <meta name="MobileOptimized" content="320">
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
    <!-- END GLOBAL MANDATORY STYLES -->
    <link href="assets/plugins/select2/select2_metro.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-datepicker/css/datepicker.css" />
    <!-- BEGIN THEME STYLES -->
    <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/pages/tasks.css" rel="stylesheet" type="text/css" />
    <link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color" />
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css" />
    <style>
        canvas{
            font-family: "Microsoft Yahei"
        }
    </style>
    <!-- END THEME STYLES -->
    <link rel="shortcut icon" href="favicon.ico" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed">
<!-- BEGIN HEADER -->
<div class="header navbar navbar-inverse navbar-fixed-top">
    <!-- BEGIN TOP NAVIGATION BAR -->
    <div class="header-inner">
        <!-- BEGIN LOGO -->
        <a class="navbar-brand" href="index.html">
            <img src="assets/img/logo.png" alt="logo" class="img-responsive" />
        </a>
        <!-- END LOGO -->
        <!-- BEGIN RESPONSIVE MENU TOGGLER -->
        <a href="javascript:;" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <img src="assets/img/menu-toggler.png" alt="" />
        </a>
        <!-- END RESPONSIVE MENU TOGGLER -->
        <!-- BEGIN TOP NAVIGATION MENU -->
        <ul class="nav navbar-nav pull-right">
            <!-- BEGIN USER LOGIN DROPDOWN -->
            <li class="dropdown user">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
                    <img alt="" src="assets/img/avatar1_small.jpg" />
                    <span class="username">Bob Nilson</span>
                    <i class="icon-angle-down"></i>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="extra_profile.html"><i class="icon-user"></i> My Profile</a>
                    </li>
                    <li>
                        <a href="page_calendar.html"><i class="icon-calendar"></i> My Calendar</a>
                    </li>
                    <li>
                        <a href="inbox.html"><i class="icon-envelope"></i> My Inbox <span class="badge badge-danger">3</span></a>
                    </li>
                    <li>
                        <a href="#"><i class="icon-tasks"></i> My Tasks <span class="badge badge-success">7</span></a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="javascript:;" id="trigger_fullscreen"><i class="icon-move"></i> Full Screen</a>
                    </li>
                    <li>
                        <a href="extra_lock.html"><i class="icon-lock"></i> Lock Screen</a>
                    </li>
                    <li>
                        <a href="login.html"><i class="icon-key"></i> Log Out</a>
                    </li>
                </ul>
            </li>
            <!-- END USER LOGIN DROPDOWN -->
        </ul>
        <!-- END TOP NAVIGATION MENU -->
    </div>
    <!-- END TOP NAVIGATION BAR -->
</div>
<!-- END HEADER -->
<div class="clearfix"></div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div class="page-sidebar navbar-collapse collapse">
    <!-- BEGIN SIDEBAR MENU -->
    <ul class="page-sidebar-menu">
        <li>
            <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
            <div class="sidebar-toggler hidden-phone"></div>
            <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
        </li>
        <li class="start active">
            <a href="index.html">
                <i class="icon-home"></i>
                <span class="title">运营后台</span>
                <span class="selected"></span>
            </a>
        </li>
        <li class="open">
            <a href="index.html">
                <i class="icon-sitemap"></i>
                <span class="title">数据统计</span>
            </a>
        </li>
        <li class="">
            <a href="shop.query.html">
                <i class="icon-gift"></i>
                <span class="title">商品管理</span>
            </a>
        </li>
        <li class="">
            <a href="order.query.html">
                <i class="icon-gift"></i>
                <span class="title">订单查询</span>
            </a>
        </li>
        <li class="">
            <a href="mes.group.html">
                <i class="icon-gift"></i>
                <span class="title">消息群发</span>
            </a>
        </li>
        <li class="">
            <a href="advice.html">
                <i class="icon-gift"></i>
                <span class="title">用户意见</span>
            </a>
        </li>
    </ul>
    <!-- END SIDEBAR MENU -->
</div>
<!-- END SIDEBAR -->
<!-- BEGIN PAGE -->
<div class="page-content">
    <!-- BEGIN PAGE HEADER-->
    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
    <h3 class="page-title">数据统计</h3>
    <ul class="page-breadcrumb breadcrumb">
        <li>
            <i class="icon-home"></i>
            <a href="index.html">主页</a>
            <i class="icon-angle-right"></i>
        </li>
        <li><a href="#">数据统计</a></li>
    </ul>
    <!-- END PAGE TITLE & BREADCRUMB-->

    <div class="portlet box blue">
        <div class="portlet-title">
            <div class="caption">激活量统计</div>
        </div>
        <div class="portlet-body form">
            <div id="main" style="height: 400px;font-family: Microsoft Yahei">

            </div>

        </div></div>
    <div class="portlet box blue">
        <div class="portlet-title">
            <div class="caption">订单统计</div>
        </div>
        <div class="portlet-body form">
            <!-- BEGIN FORM-->
            <form action="#" class="form-horizontal">
                <div class="form-body">
                    <div class="form-group">
                        <label class="control-label col-md-1" for="inputWarning">保养时间</label>
                        <div class="col-md-2">
                            <div class="input-group date date-picker" data-date="12-02-2012" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
                                <input type="text" class="form-control" readonly>
                                        <span class="input-group-btn">
                                            <button class="btn default" type="button"><i class="icon-calendar"></i></button>
                                        </span>

                            </div>
                        </div>
                        <div class="col-md-1 no-space">
                            <select class="form-control">
                                <option>2</option>
                                <option>2</option>
                                <option>2</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group date date-picker" data-date="12-02-2012" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
                                <input type="text" class="form-control" readonly>
                                        <span class="input-group-btn">
                                            <button class="btn default" type="button"><i class="icon-calendar"></i></button>
                                        </span>
                            </div>
                        </div>
                        <div class="col-md-1 no-space">
                            <select class="form-control">
                                <option>2</option>
                                <option>2</option>
                                <option>2</option>
                            </select>
                        </div>
                        <label class="control-label col-md-2" for="inputWarning">经销商</label>
                        <div class="col-md-3">
                            <select class="form-control">
                                <option>2</option>
                                <option>2</option>
                                <option>2</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-1" for="inputWarning">提交时间</label>
                        <div class="col-md-2">
                            <div class="input-group date date-picker" data-date="12-02-2012" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
                                <input type="text" class="form-control" readonly>
                                        <span class="input-group-btn">
                                            <button class="btn default" type="button"><i class="icon-calendar"></i></button>
                                        </span>
                            </div>
                        </div>
                        <div class="col-md-1 no-space">
                            <select class="form-control">
                                <option>2</option>
                                <option>2</option>
                                <option>2</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group date date-picker" data-date="12-02-2012" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
                                <input type="text" class="form-control" readonly>
                                        <span class="input-group-btn">
                                            <button class="btn default" type="button"><i class="icon-calendar"></i></button>
                                        </span>
                            </div>
                        </div>
                        <div class="col-md-1 no-space">
                            <select class="form-control">
                                <option>2</option>
                                <option>2</option>
                                <option>2</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                        </div>
                        <div class="col-md-3">
                            <button class="btn blue">查询</button>
                        </div>
                    </div>
                    <hr />
                    <div class="dataTable">
                        <table class="table table-striped table-bordered table-hover" id="sampleStats">
                            <thead>
                            <tr>
                                <th>订单总数</th>
                                <th>经销商填写备注的订单数</th>
                                <th>接单数</th>
                                <th>拒单数</th>
                                <th>操作反选项目的订单数</th>
                                <th>用户点击已完成的订单数</th>
                                <th>完工后用户主动更新公里数的订单数</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>10</td>
                                <td>5555</td>
                                <td>55</td>
                                <td>1</td>
                                <td>22</td>
                                <td>5454</td>
                                <td>54</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>5555</td>
                                <td>55</td>
                                <td>1</td>
                                <td>22</td>
                                <td>5454</td>
                                <td>54</td>
                            </tr>
                            <tr>
                                <td>10</td>
                                <td>5555</td>
                                <td>55</td>
                                <td>1</td>
                                <td>22</td>
                                <td>5454</td>
                                <td>54</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>
            <!-- END FORM-->
        </div>
    </div>
    <!-- END PAGE HEADER-->
</div>
<!-- END PAGE -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<div class="footer">
    <div class="footer-inner">
        2013 &copy; Metronic by keenthemes.
    </div>
    <div class="footer-tools">
            <span class="go-top">
                <i class="icon-angle-up"></i>
            </span>
    </div>
</div>
<!-- END FOOTER -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-ui/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.cookie.min.js" type="text/javascript"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="assets/plugins/select2/select2.min.js"></script>
<script type="text/javascript" src="assets/plugins/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="assets/plugins/data-tables/DT_bootstrap.js"></script>
<script src="http://echarts.baidu.com/build/echarts-plain.js"></script>
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="assets/scripts/app.js" type="text/javascript"></script>
<script src="assets/scripts/table.js"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
    jQuery(document).ready(function () {

        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title : {
                text: '激活量统计',
                subtext: '激活',
                x:'center',
                textStyle : {
                    fontFamily: '微软雅黑'
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)",
                textStyle : {
                    fontFamily: '微软雅黑'
                }
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                textStyle : {
                    fontFamily: '微软雅黑'
                },
                data:['优酷激活','苹果激活','安卓激活','百度激活','其他激活']
            },

            toolbox: {
                show : true,
                feature : {
                    mark : {show: false},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', 225],
                    textStyle : {
                        fontFamily: '微软雅黑'
                    },
                    data:[
                        {value:335, name:'优酷激活'},
                        {value:310, name:'苹果激活'},
                        {value:234, name:'安卓激活'},
                        {value:135, name:'百度激活'},
                        {value:1548, name:'其他激活'}
                    ]
                }
            ]
        };


        // 为echarts对象加载数据 
        myChart.setOption(option);
        App.init();
        TableStats.init();
        $("select.form-control").select2();
        $('.date-picker').datepicker({
            rtl: App.isRTL(),
            autoclose: true
        });
    });
</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>